<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }
   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>10. Auto tree</h1>
   <h2>Automatic row and column tree</h2>

   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='10-Auto_tree.js' target="_blank">10-Auto_tree.js</a></div>
      <div class="Main" style='height:500px;'>
         <bdo Debug='check' Data_Url='10-Auto_tree.js'></bdo>
      </div>
   </center>

   <script>

// Returns Level of column where is called
function getcollevel(){ // Custom formula function, the name must be lowercase
var P = arguments.callee.caller.arguments[0]; // Access to the object with actual grid cell
var lev = P.Grid.Cols[P.Col].Level;
return lev ? lev : 0;
}

// Returns Level of row where is called
function getrowlevel(){ // Custom formula function, the name must be lowercase
var P = arguments.callee.caller.arguments[0]; // Access to the object with actual grid cell
var lev = P.Row.Level;
return lev ? lev : 0;
}

// Returns count of calculation iteration - it is increased whenever the sheet is recalculated
var ccount = 0;
function calccnt(){ // Custom formula function, the name must be lowercase
return ++ccount;
}

   </script>
   <ul>
      <li><h4>Automatic row tree</h4><br />
         To create row tree automatically, place all rows directly to &lt;B> tag and set their <h3>Level</h3> attribute to the level where the row should be placed. 0 means root row, 1 first level, ...<br />
         Next row can have Level maximally by 1 higher than previous row. In reversed tree previous row can have Level maximally by 1 higher than next row.<br />
         To collapse row's children, set row attribute <b>Expanded</b>='<b>0</b>'.<br />
      </li>
      <li>
         Set also <h3>MainCol</h3> normally to colum where to show the tree.<br />
         To automatically update width of the main column when maximal Level changes, set <b>AutoTreeWidth</b> to the reserved width for the main column value.<br />
         In auto tree it is usually set <b>IndentType</b> to <b>1</b> or <b>2</b> to preserve row position when indenting / outdenting it.<br />
         To show the Levels buttons to expand rows to given level add <b><i>xxx</i>Levels</b> to &lt;Header> tag, where the <i>xxx</i> is the MainCol value.<br />
         If all rows have set Level='0', the tree can be automatically hidden. To hide it automatically, set &lt;Cfg <b>HideEmptyTree</b>='<b>1</b>'/>.<br />
         To not show the tree lines and buttons in the MainCol, but still provide the most of tree features, set &lt;Cfg <b>HideTree</b>='<b>1</b>'/>.<br />
         To reverse tree set &lt;Cfg <b>ReversedTree</b>='<b>1</b>'. The parent rows will be displayed below their children like in MS Excel by default.<br />
      </li>

      <li><h4>Automatic column tree</h4><br />
         To permit and show auto column tree set &lt;Cfg <h3>ColTree</h3> to <b>3</b> or <b>4</b>.<br />
         The value <b>4</b> shows reversed tree, with parents right to the children, like in MS Excel by default.<br />
         To not show the ColTree rows with tree lines and buttons, but still provide the most of tree features, set &lt;Cfg <b>ColTree</b>='<b>2</b>'/>.<br />
      </li>
      <li>
         To create column tree automatically, set <h3>Level</h3> in column &lt;C> tags. Set the Level to the level where the column should be placed. 0 means root row, 1 first level, ...<br />
         Next column can have Level maximally by 1 higher than previous column. In reversed tree previous column can have Level maximally by 1 higher than next column.<br />
         To collapse column's children, set <b>Visible</b>='<b>0</b>' to all the child columns.<br />
      </li>
      <li>
         The auto column tree adds one fixed row per column level, with lines and expand / collapse buttons. These rows get <b>Def</b>="<b>ColTree</b>".<br />
         The ColTree rows are placed by default above the first header, to place them somewhere else add &lt;I Def='<b>ColTree</b>'/> to the position in &lt;Head> or &lt;Foot> section.<br />
         It is possible to limit the count of the ColTree rows by &lt;Cfg <a>MaxColLevel</a>, default limit is <b>10</b>.<br />
         To show the Level buttons to expand columns to given level add <b><i>xxx</i>Level</b> to the default row "ColTree", like &lt;Def>&lt;D Name="ColTree" xxxButton="Level" />&lt;/Def> where the <i>xxx</i> is the column where to show the buttons - the column should not be part of the tree.<br />
         By default there is added one last ColTree row just to support Level button to expand all columns, to hide this last row set &lt;Cfg <b>ColTreeLast</b>='<b>0</b>'.<br />
      </li>

      <li><h4>Custom formula functions</h4><br />
      This example shows also using custom formula functions, here are defined three functions <i>calccnt()</i>, <i>getrowlevel()</i>, <i>getcollevel()</i>.<br />
      The functions are defined as global JavaScript functions in &lt;script> tag in the HTML page.<br />
      They are assigned to TreeGrid in &lt;Lang> as &lt;FormulaFunctions getcollevel="getcollevel" getrowlevel="getrowlevel" calccnt="calccnt"/><br />
      The functions are not exported to xlsx, it is set by &lt;Cfg NoExportFunc="getcollevel,getrowlevel,calccnt"/><br />
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialSheet\s*=\s*(\d+)/), TGIndex = 512;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialSheet1", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialSheet="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>